<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div style="border: 1px solid #D3E1F5;" :style="{width:dWidth}">
    <!--    <span id="txtt" v-if="flag">过程状态：正常</span>-->
    <!--    <span id="txt" v-else>过程状态：异常</span>-->
    <div id="singlevalue" style="height: 400px;" :style="{width:dWidth}"></div>
  </div>

</template>
<script>

const echarts = require('echarts')
export default {
  props: ['sing', 'dWidth'],
  name: '',
  data() {
    return {
      data: [],
      list: [],
      flag: true
    }
  },
  //调用
  mounted() {
  },
  watch: {
    sing: function(newvalue) {
      console.log('传值')
      console.log(newvalue)
      this.flag = true
      for (let i in newvalue.points) {
        if (newvalue.points[i].abNormalX !== 'green') {
          newvalue.points[i].x = newvalue.points[i].x + ' '
        }
      }
      this.data = []
      let array = []
      this.list = newvalue
      let lclx = newvalue.lclx
      let uclx = newvalue.uclx
      for (let i = 0; i < this.list.points.length; i++) {
        if (this.list.points[i].abNormalX) {
          this.flag = false
        }
        let arr = []
        array.push(this.list.points[i].x)
        arr.push(this.list.points[i].creatDate)
        arr.push(this.list.points[i].x)
        this.data.push(arr)
      }
      this.singlevalue = echarts.init(document.getElementById('singlevalue'))
      this.singlevalue.setOption({
        tooltip: {
          trigger: 'axis'
        },
        title: [{
          left: 'left',
          text: '单值控制图'
        }],
        xAxis: {
          data: this.data.map(function(item) {
            return item[0]
          })
        },
        yAxis: {
          splitLine: {
            show: false
          },
          min: function(e) {
            if (e.min < newvalue.lsl) {

              return (parseInt(Number(e.min * 10000).toString()) / 10000).toFixed(4)
            } else if (e.min > newvalue.lsl) {

              // (parseInt(b*1000)/1000).toFixed(3)
              return (newvalue.lsl).toFixed(4)
            } else {

              //(parseInt(b*1000)/1000).toFixed(3)
              return (e.min).toFixed(4)
            }
          },
          max: function(e) {
            if (e.max < newvalue.usl) {
              return (newvalue.usl).toFixed(4)
            } else if (e.max > newvalue.usl) {
              return (e.max).toFixed(4)
            } else {
              return (e.max).toFixed(4)
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 90,
            end: 100,
            xAxisIndex: [0]
          }
        ],
        series: {
          type: 'line',
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          data: this.data.map(function(item) {
            return item[1]
          }),
          itemStyle: {
            normal: {
              color: function(newvalue) { //拐点颜色回调
                if (newvalue.value > newvalue.usl || newvalue.value < newvalue.lsl) {
                  return 'red'
                } else if (newvalue.value > uclx || newvalue.value < lclx) {
                  return 'yellow'
                } else {
                  return 'green'
                }
              },
              lineStyle: {
                color: 'green'
              }
            }
          },
          markLine: {
            silent: true,
            symbol: 'none',//去掉箭头
            data: [{
              yAxis: lclx.toFixed(3),
              lineStyle: {
                width: 2,
                color: 'black',
                type: 'dotted'
              }
            },
              //   {
              //   yAxis: this.list.clx,
              //   lineStyle: {
              //     width: 3,
              //     color: 'black',
              //     type: 'dotted'
              //   },
              // },
              {
                yAxis: uclx.toFixed(3),
                lineStyle: {
                  width: 2,
                  color: 'black',
                  type: 'dotted'
                }
              },
              {
                yAxis: this.list.usl.toFixed(3),
                lineStyle: {
                  width: 2,
                  color: '#e82020',
                  type: 'dotted'
                }
              },
              {
                yAxis: this.list.lsl.toFixed(3),
                lineStyle: {
                  width: 2,
                  color: '#e82020',
                  type: 'dotted'
                }
              }
            ]
          }
        }
      })
    },
    immediate: true,
    deep: true
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

#singlevalue {
  margin-top: -25px !important;
}

#txt {
  margin-left: 130px;
  font-weight: bolder;
  font-size: 15px;
  color: red;
}

#txtt {
  margin-left: 130px;
  font-weight: bolder;
  font-size: 15px;
  color: green;
}

.txt2 {
  float: right;
  margin-right: 30px;
}
</style>